<?xml version="1.0"?>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:h="http://java.sun.com/jsf/html" xmlns:f="http://java.sun.com/jsf/core"
  xmlns:m="http://www.ol4jsf.org" xmlns:ui="http://java.sun.com/jsf/facelets">

<h:head>
</h:head>


<h:body>

  <style type="text/css">
.management {
	position: fixed;
	margin-right: auto;
	right: 5%;
	top: 20%;
	width: 20%;
}
</style>
<title>deegree 3 services</title>
  <h1 align="center">deegree 3 services</h1>

  <f:view>
    <h:form id="mapForm">
      <h:panelGroup id="mapPanel" binding="#{openLayers.mapPanel}">
        <m:map width="70%" height="90%" id="map" jsVariable="map" binding="#{layerDatabase.openlayersMap}"
          options="{projection: '#{openLayers.coordinateSystem}', allOverlays: true, maxResolution: 'auto', minResolution: 'auto', minExtent: new OpenLayers.Bounds(-0.00000001, -0.0000001, 0.0000001, 0.00000001), maxExtent: new OpenLayers.Bounds(#{openLayers.minx}, #{openLayers.miny}, #{openLayers.maxx}, #{openLayers.maxy})}">

          <m:layerSwitcherControl />

          <ui:repeat value="#{openLayers.layers}" var="layer">
            <m:wmsLayer name="#{layer.title}" url="#{openLayers.url}"
              params="{layers: '#{layer.name}', transparent: true, format: 'image/png' #{layer.extraParams}}"
              jsVariable="#{layer.jsName}" />
          </ui:repeat>

          <m:script>
            <ui:repeat value="#{openLayers.layers}" var="layer">
              <h:outputText value="#{layer.jsName}.setVisibility(false);" />
              <h:outputText value="#{layer.jsName}.id = '#{layer.name}';" />
            </ui:repeat>
          </m:script>

        </m:map>
      </h:panelGroup>

    </h:form>

    <h:outputScript>
            function dumpln(s){
                dump(s)
                dump('\n')
            }
            function reloadStatistics(){
                var value = document.getElementById('management:from').value + "/" + document.getElementById('management:until').value + '/'
                var stats = map.getLayer('statistics')
                dumpln(stats.mergeNewParams({time: value}))
                dumpln(stats.getFullRequestString())
                dumpln(stats.redraw())
            }
        </h:outputScript>


    <h:panelGroup styleClass="management">
      <h:form id="management">

        <h:panelGrid>
          <h:column>
            <h:commandLink actionListener="#{layerDatabase.switchAddOpen}" value="Add layer from database"
              rendered="#{layerDatabase.doesHaveWmsConnection}">
              <f:ajax render="addlayer" />
            </h:commandLink>
          </h:column>
          <h:panelGroup id="addlayer">
            <h:panelGroup rendered="#{layerDatabase.addOpen}">
              <h:panelGrid>
                <h:column>
                  <h:selectOneMenu value="#{layerDatabase.selectedWmsConnection}"
                    rendered="#{layerDatabase.doesHaveMultipleWmsConnections}">
                    <f:selectItems value="#{layerDatabase.wmsConnections}" var="wmsConnection"
                      itemLabel="#{wmsConnection}" itemValue="#{wmsConnection}" />
                  </h:selectOneMenu>
                </h:column>
                <h:column>
                  <h:selectOneMenu value="#{layerDatabase.selectedConnection}">
                    <f:selectItems value="#{layerDatabase.connections}" var="connection" itemLabel="#{connection}"
                      itemValue="#{connection}" />
                    <f:ajax listener="#{layerDatabase.fetchSchemas}" render="schemas tables addlayer" />
                  </h:selectOneMenu>
                </h:column>
                <h:column>
                  <h:selectOneMenu id="schemas" value="#{layerDatabase.selectedSchema}"
                    rendered="#{layerDatabase.manySchemas}">
                    <f:selectItems value="#{layerDatabase.schemas}" var="schema" itemLabel="#{schema}"
                      itemValue="#{schema}" />
                    <f:ajax listener="#{layerDatabase.fetchTables}" render="tables" />
                  </h:selectOneMenu>
                </h:column>
                <h:column>
                  <h:selectOneMenu id="tables" value="#{layerDatabase.selectedTable}">
                    <f:selectItems value="#{layerDatabase.tables}" var="table" itemLabel="#{table}" itemValue="#{table}" />
                    <f:ajax render="crs" action="tableChanged" />
                  </h:selectOneMenu>
                </h:column>
                <h:column>
                  <h:inputText id="crs" value="#{layerDatabase.crs}">
                    <f:ajax />
                  </h:inputText>
                </h:column>
                <h:column>
                  <h:commandButton action="#{layerDatabase.addLayer}" value="Add layer to WMS">
                  </h:commandButton>
                </h:column>
              </h:panelGrid>
            </h:panelGroup>
          </h:panelGroup>
        </h:panelGrid>

        <h:panelGrid render="#{openLayers.statisticsAvailable}">
          <h:panelGrid>
            <h:column>
                            Select the time span of requests to be shown for the statistics layer:
                        </h:column>
            <h:column>
              <h:inputText id="from" value="#{openLayers.from}" valueChangeListener="#{openLayers.timeChanged}">
                <f:convertDateTime pattern="yyyyMMdd'T'HHmmss'Z'" />
                <f:ajax onevent="reloadStatistics">
                </f:ajax>
              </h:inputText>
            </h:column>
            <h:column>
                            until
                        </h:column>
            <h:column>
              <h:inputText id="until" value="#{openLayers.until}" valueChangeListener="${openLayers.timeChanged}">
                <f:convertDateTime pattern="yyyyMMdd'T'HHmmss'Z'" />
                <f:ajax onevent="reloadStatistics" />
              </h:inputText>
            </h:column>
          </h:panelGrid>
        </h:panelGrid>

      </h:form>
    </h:panelGroup>

  </f:view>

</h:body>
</html>
